import React, { Component } from 'react'
import './App.scss';
import 'bootstrap/dist/css/bootstrap.css'
// import background1 from '../../assets/image/background1.png'
// 组件
import Logininfo from '../compenent/Logininfo'
import Register from '../compenent/Register'
import System from '../compenent/System'


export default class App extends Component {
  constructor(props){
    super(props)
    this.state={
      switchover:true,
      orthos:false,
    }
  }
  componentDidMount(){
    // 页面加载时如会话存储数据“nickname”有值可直接进入系统
    if(sessionStorage.getItem('nickname')){
      this.setState({
        orthos:true
      })
    }
  }

// 切换登陆/注册
Switchover = () =>{
  this.setState({
    switchover:!this.state.switchover
  })
}
// 进入/退出系统
Orthos = () =>{
  if(!this.state.orthos){
    // 进入系统
    this.setState({
      orthos:!this.state.orthos
    })
  }else{
    // 退出系统
    if(window.confirm("确认注销账号并返回登陆页面吗？")){
      this.setState({
        orthos:!this.state.orthos
      })
      // 清除会话存储
      sessionStorage.removeItem('nickname')
    }
  }
}
  render() {
    return (
      <div className="App">
        
        {/* <img className="app_image" src={ background1 } alt=""/> */}
        {
          // 进入系统
          this.state.orthos?
          // 系统页面
          <System
          Orthos={this.Orthos}
          />
          :
            this.state.switchover ? 
            // {/* 登陆页面 */}
            <Logininfo
            Switchover={this.Switchover}
            Orthos={this.Orthos}
            />
            :
            // {/* 注册页面 */}
            <Register
            Orthos={this.Orthos}
            Switchover={this.Switchover}
            />
          
        }
    </div>
    )
  }
}


